{% block sw_cms_el_config_form %}
<sw-tabs
    position-identifier="sw-cms-element-config-form"
    class="sw-cms-el-config-form__tabs"
    default-item="content"
>

    <template #default="{ active }">
        {% block sw_cms_el_config_form_tab_content %}
        <sw-tabs-item
            :title="$tc('sw-cms.elements.general.config.tab.content')"
            name="content"
            :active-tab="active"
        >
            {{ $tc('sw-cms.elements.general.config.tab.content') }}
        </sw-tabs-item>
        {% endblock %}

        {% block sw_cms_el_form_config_tab_options %}
        <sw-tabs-item
            v-if="element.config.type.value === 'contact'"
            :title="$tc('sw-cms.elements.general.config.tab.settings')"
            name="options"
            :active-tab="active"
        >
            {{ $tc('sw-cms.elements.general.config.tab.settings') }}
        </sw-tabs-item>
        {% endblock %}
    </template>

    <template
        #content="{ active }"
    >
        {% block sw_cms_el_form_config_content %}
        <sw-container
            v-if="active === 'content'"
            class="sw-cms-el-config-form__tab-content"
        >

            {% block sw_cms_el_form_config_content_form_type %}
            <mt-select
                v-model="element.config.type.value"
                :label="$tc('sw-cms.elements.form.config.label.type')"
                :options="formTypeOptions"
            />
            {% endblock %}

            {% block sw_cms_el_form_config_content_form_title %}

            <mt-text-field
                v-model="element.config.title.value"
                :label="$tc('sw-cms.elements.form.config.label.title')"
            />
            {% endblock %}

            {% block sw_cms_el_form_config_content_form_confirmation_text %}
            <mt-textarea
                v-if="element.config.type.value === 'contact'"
                v-model="element.config.confirmationText.value"
                :label="$tc('sw-cms.elements.form.config.label.confirmationText')"
            />
            {% endblock %}
        </sw-container>
        {% endblock %}

        {% block sw_cms_el_form_config_options %}
        <sw-container
            v-else-if="active === 'options' && element.config.type.value === 'contact'"
            class="sw-cms-el-config-form__tab-options"
        >
            <sw-tagged-field
                :value="element.config.mailReceiver.value"
                :class="getLastMailClass"
                :label="$tc('sw-cms.elements.form.config.label.receiverEmail')"
                name="mailReceiver"
                placeholder="john@doe.com"
                @update:value="updateMailReceiver"
            />
        </sw-container>
        {% endblock %}
    </template>
</sw-tabs>
{% endblock %}
